<template>
  <div class="box">
    <!-- 导航栏 -->
    <HeadNav />
    <!-- 居中 -->
    <div class="center">
      <!-- 左侧用户信息 -->
      <div class="user">
        <div class="p_lc">
          <div class="p_ltop">
            <div class="p_head"></div>
            <div class="p_headR">
              <!-- 超出部分隐藏-->
              <p class="p_name">
                {{username}}
              </p>
              <span class="p_sex"></span>

              <p class="p_email">{{ucentUserInfo.userEmail}}</p>
            </div>
          </div>
          <!-- 个性签名-->
          <div class="p_sign">
            <p id="psign">{{ucentUserInfo.userqm}}</p>

            <div class="p_csign">
              <img src="../components/images/p_11.png" />
              <a href="">编辑</a>
            </div>
          </div>
          <!-- 个人数据-->
          <div class="p_pdata">
            <div class="p_data">
              <div class="p_pdataa" v-for="item in menu1" :key="item.id" @click="al(item.id)" :class="count == item.id?active:''">
                <p id="p_tz">{{item.num}}</p>

                <p>{{item.text}}</p>
              </div>
            </div>
          </div>
          <!-- 左边菜单-->
          <ul class="p_me">
            <li class="p_sdata p_scolor" v-for="item in menu2" :key="item.id" @click="al(item.id)" :class="count == item.id?active:''">
              <span :class="item.cls"></span>

              <p>{{item.text}}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 右侧信息 -->
      <div class="content">
        <!-- 我的帖子 -->
        <div v-show="ucenterShow==5">
          <Myposts />
        </div>
        <!-- 关注 -->
        <div v-show="ucenterShow==6">
          <Follow />
        </div>
        <!-- 被关注 -->
        <div v-show="ucenterShow==7">
          <Noticed />
        </div>
        <!-- 个人资料 -->
        <div v-show="ucenterShow == 0">
          <Personal />
        </div>
        <!-- 消息中心 -->
        <div v-show="ucenterShow == 1">
          <Information />
        </div>
        <!-- 我的收藏 -->
        <div v-show="ucenterShow==2">
          <Mycollection />
        </div>
        <!-- 我的评论 -->
        <div v-show="ucenterShow == 3">
          <Mycomment />
        </div>
        <!-- 我的小组 -->
        <div v-show="ucenterShow == 4">
          <Group />
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import "../components/style/personalCenter.css";
import HeadNav from "../components/HeadNav";
import Myposts from '../components/users/Myposts.vue';
import Follow from '../components/users/follow.vue';
import Personal from '../components/users/personal.vue';
import Noticed from '../components/users/Noticed.vue';
import Information from '../components/users/Information.vue';
import Mycollection from '../components/users/Mycollection.vue';
import Mycomment from '../components/users/Mycomment.vue';
import Group from '../components/users/group.vue';

export default {
  components: {
    HeadNav,
    Myposts,
    Follow,
    Personal,
    Noticed,
    Information,
    Mycollection,
    Mycomment,
    Group,
  },
  created(){
    this.$on('get',(data)=>{
      //console.log(data);
      this.ucentUserInfo=data
      //console.log(this.ucentUserInfo);
      this.username = data.userName
    })
  },
  data(){
    return {
      count:5,
      username:'',
      active:"active",
      isactive:true,
      ucenterShow:5,
      ucentUserInfo:{},
      menu1:[
        {
          id:5,
          text:'帖子',
          num:22
        },
        {
          id:6,
          text:'关注',
          num:22
        },
        {
          id:7,
          text:'被关注',
          num:22
        }
      ],
      menu2:[
        {
          id:0,
          text:'编辑个人资料',
          cls:'p_sdatas'
        },
        {
          id:1,
          text:'消息中心',
          cls:'p_sdataa'
        },
        {
          id:2,
          text:'我的收藏',
          cls:'p_sdatab'
        },
        {
          id:3,
          text:'我的评论',
          cls:'p_sdatac'
        },
        {
          id:4,
          text:'我的小组',
          cls:'p_sdatad'
        }
      ]
    }
  },
  mounted(){
    if (JSON.parse(localStorage.getItem("username"))) {
      this.username = JSON.parse(localStorage.getItem("username"));
    }
  },
  methods:{
    al(id){
      this.count = id
      this.ucenterShow = id
    },
    getUserInfo(data){
      console.log(data);
    }
  }
};
</script>

<style>
body{
  background: #F5F5F5;
}
.center{
  width: 70%;
  margin: 20px auto 0;
}
.active{
  background: #09ADE2;
  color: #fff;
}
.content{
  margin-left: 365px;
}
.p_pdataa{
  margin-right: 10px;
}
.p_pdataa:last-child{
  margin-right: 0;
}
</style>